<template>
  <el-container class="work-warp">
    <div class="top">
      <TopFilter ref="formPanel" :list="orderList" :cols="3" :labelWidth="110" formType="add" @filterChange="searchRepairOrder"></TopFilter>
    </div>

    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      selectionType="single"
      :datakey="'rows'"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="arr => (this.onChangeColumn = arr)"
      columnsRef="partPartOutboundPartSalesOrder"
    ></FilterTable>

    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button @click="closeDialog">关 闭</el-button>
      <el-button type="primary" :loading="addBtnState" @click="saveDialog">保 存</el-button>
    </div>
  </el-container>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
// 查询服务顾问
import { searchRoleByCode } from '@/api/common/empSelect/index';
import dictCode from '@/utils/dictCode';
import moment from 'moment';
import { searchRepairOrder, serviceConsultant } from '@/api/part/partOut/partSales/index';
// 获取员工
import { getDealerUser } from '@/api/customerRepair/customerComplaint/customerComplaintReception';
export default {
  name: 'order',
  mixins: [dictionary],
  data() {
    this.BaseTable = null;
    return {
      orderList: this.createFormList(),
      fetchApi: searchRepairOrder, // 调用接口
      fetchParams: { xhrAbort: true }, // 调用数据
      columns: this.createTablelist(),
      onChangeColumn: [],
      serviceAdvisorData: [],
      addBtnState: null
    };
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
    this.serachService();
    this.getDealerUser();
  },
  methods: {
    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '工单号',
          fieldName: 'roNo'
        },
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'license'
        },
        {
          type: 'SELECT',
          label: '服务顾问',
          fieldName: 'serviceAdvisor',
          placeholder: '请选择...',
          itemList: []
        },
        {
          type: 'INPUT',
          label: '车主',
          fieldName: 'ownerName'
        },
        {
          type: 'RANGE_DATE',
          dateType: 'daterange',
          label: '开单日期',
          style: { minWidth: '200px' },
          fieldName: 'BEGIN_TIME|END_TIME'
        }
      ];
    },
    createTablelist() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '工单号',
          dataIndex: 'RO_NO',
          width: 120,
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '维修类型',
          dataIndex: 'REPAIR_TYPE_NAME',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车牌号',
          dataIndex: 'LICENSE',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: 'VIN',
          width: 150,
          dataIndex: 'VIN',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '车主',
          dataIndex: 'OWNER_NAME',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '服务顾问',
          dataIndex: 'SERVICE_ADVISOR',
          editable: false,
          editType: 'select',
          editItems: [],
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: []
        },
        {
          title: '开单日期',
          dataIndex: 'RO_CREATE_DATE',
          dateFormat: 'yyyy-MM-dd',
          sorter: true,
          filter: true,
          filterType: 'date-range'
        },
        {
          title: '工单状态',
          dataIndex: 'RO_STATUS',
          editable: false,
          editType: 'select',
          editItems: this.createDictList(8049),
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList(8049)
        },
        {
          title: '预交车时间',
          dataIndex: 'END_TIME_SUPPOSED',
          dateFormat: 'yyyy-MM-dd',
          sorter: true,
          filter: true,
          filterType: 'date-range'
        },
        {
          title: '配件销售单号',
          dataIndex: 'SALES_PART_NO',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },
    getEmployeeName(userId) {
      const item = this.serviceAdvisorData.find(x => {
        return x.value == userId;
      });
      return item ? item.text : '';
    },
    searchRepairOrder(val) {
      if (val.BEGIN_TIME && val.END_TIME) {
        val.BEGIN_TIME = moment(val.BEGIN_TIME).format('YYYY-MM-DD');
        val.END_TIME = moment(val.END_TIME).format('YYYY-MM-DD');
      }
      const params = Object.assign({}, val, { xhrAbort: false });
      this.fetchParams = params;
    },
    // 查询服务顾问下拉框
    async serachService() {
      let roleParam = { role: dictCode.SERVICE_CONSULTANT };
      let res = await searchRoleByCode(roleParam);
      this.serviceAdvisorData = res.data.map(x => ({ text: x.employeeName, value: x.userId }));
      this.orderList.find(item => item.fieldName === 'serviceAdvisor').itemList = res.data.map(x => ({ text: x.employeeName, value: x.userId }));
    },
    // 获取所有人的信息
    async getDealerUser() {
      const res = await getDealerUser();
      this.columns.find(x => x.dataIndex == 'SERVICE_ADVISOR').filterItems = this.columns.find(x => x.dataIndex == 'SERVICE_ADVISOR').editItems = res.data.map(x => ({
        text: x.employeeName,
        value: x.userId + ''
      }));
    },
    // 查询
    queryClick() {
      this.$refs.formPanel.SUBMIT_FORM();
    },
    // 重置
    resetClick() {
      this.$refs.formPanel.RESET_FORM();
    },
    // 选中确定后关闭窗口
    saveDialog() {
      if (this.onChangeColumn.length) {
        let obj = this.onChangeColumn[0];
      }

      this.$emit('saveDialog', this.onChangeColumn);
    },
    // 点击取消关闭窗口
    closeDialog() {
      this.$emit('closeDialog', false);
    }
  }
};
</script>
<style lang="less" scoped>
.work-warp {
  flex-direction: column;

  .top {
    width: 100%;
    display: flex;
    flex-direction: column;

    .el-row {
      text-align: center;
    }
  }

  .footer {
    text-align: center;
  }
}
</style>
